<template>
	<view class="content">
		<view class="block tab-block">
			<view @click="tabActive=1" :class="tabActive==1?'active':''" class="tab-item">帮扶政策</view>
			<!-- <view @click="tabActive=3" :class="tabActive==3?'active':''" class="tab-item">申领条件</view> -->
			<view @click="tabActive=2" :class="tabActive==2?'active':''" class="tab-item">推荐职位</view>
		</view>
		<view v-if="tabActive==1" class="block list-block">
			<template v-if="list.length>0">
				<view @click="navigate('/page_other/article/detail?id='+item.id)" class="list-item policy-item"
					v-for="(item,index) in list" :key="item.id">
					<image mode="aspectFill" :src="item.ima_url" class="cover-photo"></image>
					<view class="info">
						<view class="title overflow-line">{{item.title}}</view>
						<view class="abstract">{{item.abstract}}</view>
						<view class="time">发布时间：{{item.crt_time}}</view>
					</view>
				</view>
			</template>
			<view v-else-if="list.length>0&&!more" style="text-align: center; margin-top: ;">没有更多了哦
			</view>
			<view v-else style="text-align: center;">暂无数据</view>
		</view>

		<view v-if="tabActive==2" class="block list-block">
			<view @click="navigate('/page_other/job_hunting/job_detail/index?id='+item.id)" class="list-item"
				v-for="(item,index) in jobList" :key="item.id">
				<view class="list-info">
					<view class="title">{{item.jobTitle}}</view>
					<view class="address iconfont icon-dizhi">{{item.jobAddress}}</view>
					
					<view class="wage" v-if="item.minSalary">{{item.minSalary}}-{{item.maxSalary}}<text class="unit">元</text></view>
					<view class="wage" v-else>面议</view>
				</view>
			</view>
			<view v-if="!jobList" style="text-align: center;margin-top: 30rpx;">暂无数据</view>
			<view v-else style="text-align: center;margin-top: 30rpx;">没有更多了哦
			</view>
			
		</view>
		<view v-if="tabActive==3" class="block list-block">
			<view class="detail-block">
				<view class="title">{{conditionDetail.title}}</view>
				<view class="sub-title">{{conditionDetail.create_time}}</view>
				<view class="article-content">
					<mp-html :content="conditionDetail.content" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		policyListApi
	} from '@/api/difficult_job.js'
	import {
		getPublish
	} from '@/api/position.js'
	import {
		isMore
	} from '@/util/util.js'
	export default {
		data() {
			return {
				tabActive: 1,
				list: [],
				page: 1,
				limit: 10,
				more: true,
				total: 0,
				jobList: [],
				// conditionDetail: {
				// 	title: '2022年应届毕业生基层就业补贴申请需要什么条件？',
				// 	create_time: '2022-06-21 14:45',
				// 	content: '<div><p>1、劳动者到中小微企业、个体工商户、社会组织等就业，或到乡镇（街道）、村居社会管理和公共服务岗位就业，签订1年以上劳动合同或服务协议；</p><p>2、就业时属于毕业2年内高校毕业生（高校毕业生毕业前的时段不计为申领补贴时段）；</p><p>3、劳动者已在同一单位按规定缴纳6个月以上社会保险费。高校毕业生指普通高等学校毕业生。包括普通高等学校的全日制本专科毕业生，以及全日制和非全日制硕士、博士毕业生。技工院校高级工班、预备技师班和特殊教育院校职业教育类毕业生，获得教育部留学服务中心学历学位认证的国（境）外高校毕业生，参照普通高等学校毕业生。“普通高等学校毕业学年学生”的界定，可参照本条解释。</p></div>',
				// },
				id: null,
				tabName: ''
				
			}
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			refresh() {
				this.page = 1
				this.more = true
				this.getList(true);
			},
			async getList(refresh = false) {
				if (this.more) {
					let config = {
						page: this.page,
						limit: this.limit,
						type: this.type
					}
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					let res = await policyListApi(config)
					let list = res.list ?? [];
					this.list = refresh ? list : [...this.list, ...list],
						this.total = res.count
					this.more = isMore(this.page, this.limit, this.total)
				}
			},
			   async getPublish(){
			        getPublish({keyword: this.tabName,page: this.page,limit: this.limit}).then((res)=>{
			          this.jobList=res.list
			        }).finally(()=>{
			          
			        })
			     
			    },
			
		},
		onLoad(e) {
			this.id = e.id;
			this.type = e.type
			this.tabName = e.name
			uni.setNavigationBarTitle({
				title: e.name
			})
			this.getList(true);
			this.getPublish();
		},
		onPullDownRefresh() {
			this.refresh();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			if (this.more) {
				this.page++;
				this.getList()
			}
		},
	}
</script>

<style lang="scss">
	page {
		background: #FAFAFA;
	}

	.content {
		width: 100%;
		padding: 0 30rpx;

		.block.tab-block {
			box-shadow: none;
			display: flex;
			flex-direction: row;
			justify-content: left;
			flex-wrap: wrap;

			.tab-item {
				padding: 10rpx 15rpx;
				font-weight: bold;
				font-size: 30rpx;
				margin-right: 30rpx;
			}

			.tab-item.active {
				background: url("https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/job_hunting/home/tab_selected_bg.png") no-repeat right bottom;
				background-size: 45%;
				font-size: 32rpx;
			}
		}

		.list-block.block {
			margin-top: 30rpx;
			width: 100%;
			display: flex;
			flex-direction: column;

			.list-item {
				width: 100%;
				background: #fff;
				border-radius: 10rpx;
				box-shadow: 0 0 10px 0 #efefef;
				padding: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;

				.list-info {
					width: 100%;
					display: flex;
					flex-direction: column;

					>view {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.title {
						color: #000;
						font-weight: bold;
						font-size: 34rpx;
					}

					.address {
						color: #999;
						font-size: 26rpx;
						margin-top: 20rpx;
					}

					.label-block {
						font-size: 24rpx;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: left;
						margin-top: 20rpx;

						.label-item {
							padding: 8rpx 20rpx;
							background: #F5F6F8;
							color: #999;
							margin: 0 10rpx 20rpx 0;
						}
					}

					.wage {
						color: #FE7526;
						font-size: 36rpx;
						font-weight: bold;

						.unit {
							font-size: 28rpx;
							font-weight: normal;
						}
					}
				}
			}

			.list-item.policy-item {
				height: 220rpx;
				width: 100%;
				padding: 30rpx 0;
				display: flex;
				flex-direction: row;
				border-radius: 20rpx;
				background: #fff;
				margin-bottom: 30rpx;
				padding: 20rpx;
				box-shadow: 0 0 10px 0 #efefef;

				.cover-photo {
					width: 180rpx;
					height: 180rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
					background: #efefef;
				}

				.info {
					width: calc(100% - 200rpx);
					height: 100%;

					.title {
						font-weight: bold;
					}

					.abstract {
						font-size: 24rpx;
						color: #999;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						margin-top: 10rpx;
						line-height: 1.5;
					}

					.time {
						margin-top: 10rpx;
						font-size: 28rpx;
						color: #999;
					}
				}
			}

			.detail-block {
				width: 100%;
				padding: 30rpx;
				margin: auto auto 30rpx auto;
				background-color: #fff;

				.title {
					font-size: 34rpx;
					font-weight: bold;
					margin-bottom: 30rpx;
				}

				.sub-title {
					font-size: 28rpx;
					color: #999;
					margin-bottom: 30rpx;
				}

				.article-content {
					font-size: 30rpx;
					line-height: 60rpx;
				}
			}
		}
	}
</style>
